<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .center {
            width: 1200px;
            margin: 0 auto;
        }

        .scale {
            text-decoration: none;
            color: #666;
        }

        .scale:hover {
            transform: scale(1.2);
            transition-duration: .3s;
        }

        .scale:active {
            color: orange;
        }

        footer h3 {
            color: white
        }

        .right-card .el-card__body {
            padding: 0;
        }
        .title_div{
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2; /*是webkit的私有属性，是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。*/
            -webkit-box-orient: vertical;
            color: #333;
        }
        .title_div:hover{
            color: orange;
        }

    [v-clock]{
        display: none;
    }
    </style>
</head>
<body>
<div id="app">
    <common-header></common-header>
    <el-container style="background-color: rgb(241,242,243)">

        <el-main style="margin-top: 10px;">
            <div v-clock class="center">
                <el-row :gutter="20">
                    <el-col :span="18">
                        <el-card>
                            <h2 style="text-align: center;color: orange">{{content.title}}</h2>
                            <p style="text-align: center;font-size: 12px;color: #666">作者:{{content.nickName}} |
                                发布时间:{{content.createTime}} | 阅读次数:{{content.viewCount}}</p>
                            <el-divider></el-divider>

                            <div style="padding: 10px" v-if="content.type!=2">
                                <el-card style="color: #cccccc;font-size: 12px">
                                    <b style="color: #409EFF">摘要: </b>{{content.brief}}
                                </el-card>
                                <p v-html="content.content">
                                </p>
                            </div>

                            <div v-else>
                                <video style="width: 100%"
                                       :src="content.videoUrl"
                                       class="Movie"
                                       controls="controls"
                                       muted="muted"
                                       type="audio/mp4"
                                ></video>
                            </div>
                        </el-card>
                        <el-card>
                            <p>发一条友善的评论</p>
                            <el-divider></el-divider>
                            <el-row gutter="10">
                                <el-col span="22">
                                    <el-input
                                            type="textarea"
                                            autosize
                                            v-model="comment.content">
                                    </el-input>
                                </el-col>
                                <el-col span="2">

                                    <el-button @click="reply">发布</el-button>
                                </el-col>
                            </el-row>
                            <!--评论列表开始-->
                            <div  >
                                <el-row v-for="item in commentArr">
                                    <el-col span="2">
                                        <el-avatar  :src="item.userImgUrl"></el-avatar>

                                    </el-col>
                                    <el-col span="20">
                                        <span style="color: orange;font-weight: bold">{{item.userName}}：</span>
                                        <p style="margin:5px 0">{{item.content}}</p>
                                        <span style="color: #666;font-size: 12px">{{item.createTime}}</span>
                                    </el-col>
                                </el-row>
                            </div>
                            <!--评论列表结束-->


                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="right-card" style="text-align: center;height: 240px">
                            <div style="width: 100%;height: 90px;
                                background:#fff url('/imgs/mn/avarbg1.jpg') top no-repeat;">
                            </div>
                            <div style="color: #666;position: relative;top:-45px">

                                <img style="border-radius: 90px;border: 5px solid white;" :src="content.userImgUrl"
                                     width="90" height="90" alt=""><br>
                                <span style="font-size: 20px;font-weight: bold">{{content.nickName}}</span><br>
                                <i class="el-icon-edit">本文作者</i><br>
                                <i class="el-icon-time">{{content.createTime}}</i>
                            </div>
                        </el-card>
                        <el-card>
                            <h3 style="margin-bottom: 0">作者其它文章</h3>
                            <hr>
                            <el-row gutter="10" v-for="c in otherArr">
                                <a :href="'/detail.html?id='+c.id">
                                    <el-col span="10">
                                        <img :src="c.imgUrl" width="100%" height="70px" alt="">
                                    </el-col>
                                    <el-col span="14">
                                        <div class="title_div" style="height: 50px;line-height: 24px">{{c.title}}</div>
                                        <i class="el-icon-time" style="font-size: 12px;color: #999">{{c.createTime}}</i>
                                    </el-col>
                                </a>
                            </el-row>
                        </el-card>
                        <el-card>
                            <h3 style="margin-bottom: 0">热门文章</h3>
                            <hr>
                            <el-row gutter="10" v-for="c in hotArr">
                                <a :href="'/detail.html?id='+c.id">
                                    <el-col span="10">
                                        <img :src="c.imgUrl" width="100%" height="70px" alt="">
                                    </el-col>
                                    <el-col span="14">
                                        <div class="title_div" style="height: 50px;line-height: 24px">{{c.title}}</div>
                                        <i class="el-icon-time" style="font-size: 12px;color: #999">{{c.createTime}}</i>
                                    </el-col>
                                </a>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </div>


        </el-main>


    </el-container>
    <common-footer></common-footer>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="js/common.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                content: {},
                otherArr: [],
                commentArr:[],
                hotArr: [],
                user: getLocalUser(),
                comment:{
                    content:""
                }
            }
        },
        methods: {
            reply(){
                if (v.comment.content.trim()==""){
                    v.$message.error("请输入评论的内容!");
                    return;
                }
                if (v.user.id==null){
                    v.$message.error("请先登录!")
                    location.href="/login.html";
                    return;
                }
                v.comment.userId = v.user.id;
                v.comment.contentId=v.content.id;
                axios.post("/api/comment/addUserComment",v.comment).then(function (res) {
                    if (res.data.code==0){
                        v.$message.success("评论完成!");
                        v.loadComments();
                    }else{
                        alert("登录信息超时,请重新登录");
                        location.href="/login.html";
                    }

                })

            },
            loadComments(){
                axios.get("/api/comment/getCommentList" + location.search).then(function (response) {
                    v.commentArr = response.data;
                })
            }
        },
        created: function () {
            this.loadComments();

            axios.get("/api/content/getContentDetail" + location.search).then(function (response) {
                v.content = response.data.data;
            })
            axios.get("/api/content/getUserOtherContent" + location.search + "&userId=" + this.user.id)
                .then(function (response) {
                    v.otherArr = response.data;
                })
            axios.get("/api/content/getHotContent")
                .then(function (response) {
                    v.hotArr = response.data;
                })
        }
    })
</script>
</html>